<template>
  <Content title="字典">
    <div slot="body">
      <el-row>
        <el-form :inline="true" :model="queryParams">
          <el-form-item label="编码">
            <el-input v-model="queryParams.code" placeholder="字典编码"></el-input>
          </el-form-item>
          <el-form-item label="描述">
            <el-input v-model="queryParams.description" placeholder="字典描述"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="query(undefined,undefined)" plain icon="el-icon-search">查询</el-button>
          </el-form-item>
          <el-form-item style="float: right">
            <router-link to="/dict/new">
              <el-button type="success" plain icon="el-icon-circle-plus">新增</el-button>
            </router-link>
          </el-form-item>
        </el-form>
      </el-row>
      <el-row>
        <el-table v-loading="loading"
                  :data="table.rows"
                  border
                  stripe
                  style="width: 100%">
          <el-table-column
            prop="code"
            label="编码"
            align="center"
            min-width="20%">
          </el-table-column>
          <el-table-column
            prop="description"
            label="描述"
            align="center"
            min-width="20%">
          </el-table-column>
          <el-table-column
            prop="priority"
            label="优先级"
            align="center"
            min-width="8%">
          </el-table-column>
          <el-table-column
            prop="status"
            align="center"
            label="操作"
            min-width="20%">
            <template slot-scope="scope">
              <router-link :to="'/dict/'+scope.row.code">
                <el-button
                  type="warning"
                  size="mini">编辑
                </el-button>
              </router-link>
              <el-button
                type="danger"
                size="mini"
                @click="handleDelete(scope.$index, scope.row)">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="table.pageNumber"
          :page-sizes="[5, 10, 20, 30, 50]"
          :page-size="table.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="table.total">
        </el-pagination>
      </el-row>
    </div>
  </Content>
</template>

<script>
  import {SessionStorageUtil, deleteConfirm} from '../../utils/element-helper'
  import Content from '../../components/Content.vue'
  import {Dict} from '../../utils/resource'

  export default {
    name: 'dict',
    components: {
      Content,
    },
    data() {
      return {
        loading: false,
        queryParams: {
          code: null,
          description: null,
          sortColumn: "updated desc",
        },
        table: {
          rows: [],
          total: 0,
          pageSize: 10,
          pageNumber: 1,
        },
      }
    },
    created() {
      //保存查询条件
      let q = SessionStorageUtil.getItem("dict_query")
      if (q){
        this.queryParams = q
      }
      this.query()
    },
    computed: {},
    methods: {
      handleSizeChange(val) {
        this.query(val)
      },
      handleCurrentChange(val) {
        this.query(undefined, val)
      },
      async query(pageSize, pageNumber) {
        await Dict.paging(this, pageNumber, pageSize)
        SessionStorageUtil.setItem("dict_query", this.queryParams)
      },
      handleDelete(index, row) {
        deleteConfirm(this, {}, () => Dict.delByCode(row.code), (resp) => this.query())
      },
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>


</style>
